<template>
  <div class="topics">
    <div class="title">{{ props.title }}</div>
    <ul class="footer">
      <a href="/" v-for="item in 6" :key="item">
        <li class="footer-item">
          <img class="footer-img" src="../../../images/all-item.png" alt="" />
          <div class="info">
            <p class="name">5个给春天的生活新提案</p>
            <p class="desc">餐厨起居洗护好物</p>
            <span class="price">¥399起</span>
          </div>
          <div class="comment">
            <div class="line"></div>
            <div class="num">
              <span class="fr"> 共 <i class="red">100</i>件商品 </span>
              <span class="xin">❤️</span>
              <span class="mr18">1000+</span>
              <span class="red xin">❤️</span>
              <span class="red">98%</span>
            </div>
          </div>
        </li>
      </a>
    </ul>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
});
</script>
<style scoped lang="less">
.title {
  height: 120px;
  background-color: #eeeff3;
  font-size: 32px;
  line-height: 120px;
  padding-left: 50px;
  margin: 40px 0 20px;
}
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.footer-item {
  width: 400px;
  height: 320px;
  background-color: #fff;
  margin-bottom: 20px;
  .footer-img {
    width: 100%;
    height: 190px;
    display: block;
  }
}
.info {
  padding: 0 20px;
  position: relative;
  .name {
    padding-top: 20px;
    padding-bottom: 7px;
    font-size: 16px;
  }
  .desc {
    color: #999;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px;
  }
  .price {
    position: absolute;
    top: 30px;
    right: 35px;
    color: #cf4444;
    font-size: 18px;
  }
}
.comment {
  padding: 15px 20px 0;
  line-height: 40px;
  color: #999;
  .line {
    width: 100%;
    height: 1px;
    background-color: #e4e4e4;
  }
  .num {
    line-height: 40px;
    color: #999;
  }
  .fr {
    float: right;
  }
  .red {
    color: #cf4444;
  }
  .xin {
    font-size: 16px;
  }
  .mr18 {
    margin-right: 18px;
  }
}
</style>
